import React from 'react';
import {Button} from './index';
import {View, StyleSheet} from 'react-native';
import i18n from '../i18n';
import {updateScreenSizeClass} from '../utils/jsUtils';
import stylesXS from '../styles/xs';
import stylesMD from '../styles/md';
import stylesLG from '../styles/lg';

const HeaderBtnBar = ({
  list,
  listLen,// 所有贴纸列表的长度
  onCancel,
  onReset,
  onMove,
  onDel,
  onUp,
  onCheckAll,
  checkStatus,
  screenWidth,
  screenHeight,
}) => {
  let len = list.filter(item => item?.status)?.length;
  console.log("HeaderBtnBar len:"+len+"=="+JSON.stringify(list));

  let arr = [
    {text: i18n.t('btn.cancel'), img: null, fun: onCancel},
    {
      text: i18n.t('btn.rename'),
      img: require('../../assets/ic_rename-white.png'),
      fun: onReset,
    },
    {
      text: i18n.t('btn.move'),
      img: require('../../assets/ic_move_list.png'),
      fun: onMove,
    },
    {
      text: i18n.t('btn.toTop'),
      img: require('../../assets/ic_up.png'),
      fun: onUp,
    },
    {
      text: i18n.t('btn.delete'),
      img: require('../../assets/ic_delete-white.png'),
      fun: onDel,
    },
    {
      text: i18n.t('btn.select'),
      img: checkStatus
        ? require('../../assets/ic_select_all.png')
        : require('../../assets/ic_select_white.png'),
      fun: onCheckAll,
    },
  ];
  let wd = Math.round(screenWidth);
  const styles =
    wd === 1024 || wd === 1365
      ? stylesLG
      : wd === 994 || wd === 1325
      ? stylesMD
      : stylesXS;

  return (
    <View
      style={[
        styles.headerBtn,
        styles.titleHeight,
        styles.bottomBorder,
        styles.paddingHor_48,
      ]}>
      {arr.map((item, index) => (
        <Button
          bodyStyle={[
            styles.btnBodyStyle,
            styles.titleHeight,
            {
              opacity:
                index === 0 ||
                index === 5 ||
                (len === 1 && listLen > 1 && index === 3) ||
                (len === 1 && index === 1) ||
                (len > 0 && (index === 2 || index === 4))
                  ? 1
                  : 0.5,
            },
          ]}
          imgStyle={styles.checkBtnWH}
          textStyle={[
            index === 0 ? styles.fontSize_30 : styles.fontSize_26,
            index === 0 ? null : styles.marginTop_6,
            {
              fontWeight: '400',
              color: '#fff',
            },
          ]}
          img={item?.img}
          text={item?.text}
          fun={
            index === 0 ||
            index === 5 ||
            (len === 1 && listLen > 1 && index === 3) ||
            (len === 1 && index === 1) ||
            (len > 0 && (index === 2 || index === 4))
              ? item?.fun
              : null
          }
        />
      ))}
    </View>
  );
};
export default HeaderBtnBar;
